<template>
	<view class="container">
		<!-- 输入户号缴费的布局 -->
		<view class="c_account">
			<image style="width: 40rpx; height: 54rpx; margin-left: 30rpx" src="/static/assets/water_28.png"></image>
			<input style="font-size: 32rpx; flex-grow: 1; margin-left: 30rpx" placeholder="请输入缴费户号" value="" maxlength="20" type="number" @input="onInput" />
			<view class="to_charge_btn" @tap="toCharge">去缴费</view>
		</view>

		<view id="cydb_div">
			<view id="btn_add_cydb" @tap="onAddCydb">+ 绑定水表</view>
		</view>

		<!-- 户号列表 -->
		<view class="item" @tap="toChargeByItem" :data-index="index" v-for="(item, index) in account_list" :key="index">
			<!-- 水费图标 水费 -->

			<view style="display: flex; flex-direction: row; align-items: center">
				<image style="width: 40rpx; height: 54rpx" src="/static/assets/water_26.png" mode="aspectFill" :data-index="index"></image>
				<view style="font-size: 32rpx; margin-left: 20rpx; flex-grow: 1">水费</view>
				<view style="color: #999; font-size: 28rpx">户主：{{ item.owner_name }}</view>
			</view>

			<!-- 户号 余额 -->
			<view style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 24rpx">
				<view :class="item.in_like == '1' ? 'account_cydb' : 'account_normal'">
					<!-- 户号：{{item.water}} -->
					户号：{{ item.in_like == '1' ? item.water + '(已绑定)' : item.water }}
				</view>
				<view v-if="item.money" style="color: #00be6e; font-size: 28rpx">余额：{{ item.money || '--' }}元</view>
			</view>

			<!-- 房屋 -->
			<view style="display: flex; justify-content: space-between; align-items: center; margin: 24rpx 0 0 0">
				<view style="color: #999; font-size: 28rpx">房屋：{{ item.name }}</view>
				<view style="display: flex">
					<view v-if="item.in_like == '1'" class="to_charge_btn" @tap.stop.prevent="onCancelCydb" :data-index="index">取消绑定</view>
					<view class="to_charge_btn" style="margin-right: 0rpx">去缴费</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require('../../../utils/util')
	import { getWAccountList, postUnbindWater } from '../../../utils/http/api'
	export default {
		data() {
			return {
				// 缴费户号
				account_num: '',
				// 户号列表
				account_list: []
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.reqAccountList()
		},
		// 页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh() {
			this.reqAccountList()
		},
		methods: {
			// 点击缴费按钮，先验证是否输入户号
			toCharge: function(e) {
				if (util.isNull(this.account_num)) {
					uni.showToast({ title: '请输入缴费户号', icon: 'none' })
					return
				}
				// 判断当前登录用户是否绑定当前输入的户号
				let isBind = false;
				if (this.account_list) {
					this.account_list.map((item) => {
						if (this.account_num == item.water) {
							isBind = true
						}
					})
				}
				let url = '/pages/charge/w_charge_2/w_charge_2?account_num=' + this.account_num
				if (isBind) {
					util.navigateTo(url)
				} else {
					uni.showModal({
						title: '温馨提示',
						content: `检测到您可能暂未绑定该户号水表,是否确定为其缴费?`,
						success(res) {
							if (res.confirm) {
								util.navigateTo(url)
							}
						}
					})
				}
			},

			// 点击户号直接缴费
			toChargeByItem: function(e) {
				let index = e.currentTarget.dataset.index
				let account_num = this.account_list[index].water
				let url = '/pages/charge/w_charge_2/w_charge_2?account_num=' + account_num
				util.navigateTo(url)
			},

			// 点击添加常用水表 绑定水表
			onAddCydb() {
				let that = this
				let url = '/pages/charge/w_charge_cydb/w_charge_cydb'
				uni.navigateTo({
					url,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						onBindOk(data) {
							if (data) {
								// 收到水表绑定成功的消息
								that.reqAccountList()
							}
						}
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
					}
				})
			},

			// 监听缴费户号输入框
			onInput(e) {
				// 监听输入的缴费户号，赋值给记录变量
				this.setData({ account_num: e.detail.value })
			},

			// 取消常用水表
			onCancelCydb(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否取消绑定该水表？',
					success(res) {
						if (res.confirm) {
							let index = e.currentTarget.dataset.index
							const water = that.account_list[index].water
							that.reqUnbindWater(water)
						}
					}
				})
			},

			// 接口:取消绑定水表号
			async reqUnbindWater(water) {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await postUnbindWater({ water, token: app.globalData.gl.token })
				uni.showModal({ title: '提示', content: msg })
				if (code == '1') {
					this.reqAccountList()
				}
			},

			// 请求水费户号列表
			async reqAccountList() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getWAccountList({ page: '1', limit: '999999', token: app.globalData.gl.token })
				uni.stopPullDownRefresh();
				if (code == '1') {
					this.setData({ account_list: data })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.c_account {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 20rpx 0 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.to_charge_btn {
		background-color: #ffb365;
		border-radius: 100rpx;
		color: white;
		/* height: 55rpx;
  line-height: 55rpx; */
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 22rpx;
		padding-right: 22rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
	}

	/* 户号列表item */
	.item {
		display: flex;
		flex-direction: column;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	/* 常用水表模块样式 */
	#cydb_div {
		display: flex;
		justify-content: center;
		margin: 20rpx 20rpx 0 20rpx;
	}

	#btn_add_cydb {
		border: solid 1px #ffb365;
		border-radius: 400rpx;
		font-size: 28rpx;
		color: #ffb365;
		padding: 8rpx 20rpx 8rpx 20rpx;
	}

	/* 户号:普通样式 */
	.account_normal {
		color: #999;
		font-size: 28rpx;
		font-weight: normal;
	}

	/* 户号:常用水表样式 */
	.account_cydb {
		color: #ffb365;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>